import React,{useState,useEffect,useRef} from 'react'
import { connect } from 'react-redux'
import {Flex ,Divider,Loading} from 'react-vant'
import {_getComment,_getParentComment,_getHotComment} from '../../api/recommend'
import './index.scss'
function Comment(props) {
  const {musicSrc} = props
  const [isHot,setHot] = useState(false)
  const [newComment,setNewComment] = useState([])//最新的评价
  const [hotComment,setHotComment] = useState([])//最热的评价
  const titleNode = useRef()
  const commentBoxNode = useRef()
  const [loading,setLoading] = useState(false)// true 正在加载中 false无了
  const [commentTotal,setCommentTotal] = useState(0)//最新的
  const [hotcommentTotal,setHotCommentTotal] = useState(0)//最热的
  useEffect(()=>{
    init()
  },[])
  function init(){
    window.removeEventListener('scroll',handleScroll,true);
    getComment(musicSrc.id,50,0,true,true)
    getComment(musicSrc.id,50,0,false,true)
  }
  var scrollFlag = 1 //1加载 0 正在加载中 -1无了
  var offset = 0
  var hotOffset = 0
  useEffect(()=>{
    init()
    window.addEventListener('scroll',handleScroll,true);
    return ()=>{
      init()
    }
  },[isHot,setHot])
  function handleScroll(){
    if(scrollFlag===1){
      scrollFlag=0
      setTimeout(() => {
        const dom = commentBoxNode.current
        const clientHeight = dom.clientHeight;
        const scrollTop = dom.scrollTop;
        const scrollHeight = dom.scrollHeight-30;
        scrollFlag=1
        if (clientHeight + scrollTop >= scrollHeight){
          const limit = 50
          scrollFlag=0
          setLoading(true)
          isHot? offset++:hotOffset++
          isHot? getComment(musicSrc.id,limit,offset,isHot):getComment(musicSrc.id,limit,hotOffset,isHot)
        }
      },500);
    }
  }
  //获取评论
  function getComment(id,limit,offset,flag,init=false){
    !flag?
    _getComment(id,limit,offset).then(res=>{
      setCommentTotal(res.total)
      if(init===false){
        newComment.push(...res.comments)
        setNewComment([...newComment])
      }else{
        setNewComment([...res.comments])
      }
      setTimeout(() => {
        setLoading(false)
        res.comments[0]?scrollFlag=1:scrollFlag=-1
      }, 1000);
    }):
    _getHotComment(id,0,limit,offset).then(res=>{
      setHotCommentTotal(res.total)
      if(init===false){
        hotComment.push(...res.hotComments)
        setHotComment([...hotComment])
      }else{
        setHotComment([...res.hotComments])
      }
      setTimeout(() => {
        setLoading(false)
        res.hotComments[0]?scrollFlag=1:scrollFlag=-1
      }, 1000);
    })
  }


  return (
    <div className='comment'>
        <div className='comment_title' ref={titleNode}>
            <div>评论区 (一共{isHot?hotcommentTotal:commentTotal}条评论)</div>
            <div>
                <span style={{color:!isHot?'#000':'#666',fontWeight:!isHot?'bold':'500'}} onClick={()=>setHot(false)}>最新</span>
                <Divider style={{ borderColor: '#666', margin: '0 10px' }} type='vertical'/>
                <span style={{color:isHot?'#000':'#666',fontWeight:isHot?'bold':'500'}} onClick={()=>setHot(true)}>最热</span>
            </div>
        </div>
        <div className='comment_box' ref={commentBoxNode} style={{height: titleNode.current && window.innerHeight-titleNode.current.scrollHeight+'px'}}>
          {(isHot?hotComment:newComment || []).map((item,index)=>{
            return(
              <Flex className='comment_list' key={index}>
                <div className='avatar'>
                  <img src={item.user.avatarUrl+'?param=45y45'}/>
                  <img src={item.pendantData?item.pendantData.imageUrl+'?param=60y60':''}/>
                </div>
                <div className='comment_list_main'>
                  <Flex align='center' justify='between' className='comment_list_main_top'>
                    <div className='comment_list_main_top_left'>
                      <div>{item.user.nickname}----{index}</div>
                      <div>{item.timeStr}</div>
                    </div>
                    <div className='comment_list_main_top_right'>
                      <span>{item.likedCount}</span>
                      <span className='iconfont icon-zan'/>
                    </div>
                  </Flex>
                  <div className='comment_list_main_center'>{item.content}</div>
                  <Divider style={{ borderColor: '#ddd', margin: '10px 0' }}/>
                </div>
              </Flex>
            )
          })}
          <Divider>{loading?'正在加载评论':'到底了'}</Divider>
          {/* {loading?<Loading type="ball" className='comment_loading'/>:''} */}
          
        </div>
    </div>
  )
}

export default connect(
    state =>({
      musicControls:state.musicControls,
      musicSrc:state.musicSrc,
      musicNode:state.musicNode,
    }),{

  })(Comment)

